<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的医生介绍</title>
<link rel="shortcut icon" href="${pageContext.request.contextPath}/bootstrapStyle/img/favicon.ico">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/animate.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrapStyle/css/jquery-confirm.css"/>
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
		    	<a class="btn btn-w-m btn-default " onclick="PublishIllness();" href="javascript:void(0);"><i class="fa fa-chevron-left"></i><i class="fa fa-chevron-left"></i> 返回筛选</a>
			</div>
        </div>
        <div class="col-sm-12">
			<div class="alert alert-info">
            	服务器推荐医生
        	</div>
        </div>
        <c:if test="${doctorlist==null}">
			<div class="middle-box text-center animated fadeInDown">
		        <h1>404</h1>
		        <h2 class="font-bold">找不到相应的医生，注意条件选择！</h2>
		        <div class="error-desc">
		            	查找好像出错了...
		            	<br>请于管理员联系<a>@管理员</a>
		        </div>
		    </div>
        </c:if>
        <div class="row" id="doctor" >
        	<!-- tab列表起始位置 -->
        	<c:forEach items="${doctorlist}" var="doctorinfo">
	            <div class="col-sm-4">
	                <div class="contact-box">
	                    <a data-toggle="modal" class="" href="#modal-form${doctorinfo.docloginid }" onclick="CalendarInit(${doctorinfo.docloginid })">
	                        <div class="col-sm-3">
	                            <div class="text-center">
	                                <img alt="image" class="img-rounded m-t-xs img-responsive" src="${doctorinfo.docloginpix }" style="width: 120px">
	                                <div class="m-t-xs font-bold"><i class="fa fa-user"></i> 姓名：${doctorinfo.docname }</div>
	                            	<br/>
	                            	更多详情<i class="fa fa-angle-double-right"></i>
	                            	<br/><br/>
	                            	<c:if test="${doctorinfo.docallday==true}"><span class="label label-primary">全天接诊</span></c:if>
		                        	<c:if test="${doctorinfo.docallday==false}"><span class="label label-danger">非全天接诊</span></c:if>
	                            </div>
	                        </div>
	                        <div class="col-sm-9">
		                        <div class="row">
		                        	<p><i class="fa fa-whatsapp"></i> 联系电话：${doctorinfo.docloginphone }</p>
									<hr/>
									<p><i class="fa fa-hospital-o"></i> 所属医院：${doctorinfo.dochosp }</p>
									<hr/>
									<p><i class="fa fa-bank"></i> 所属科室：${doctorinfo.docdept }</p>
									<hr/>
		                        	<div class="col-sm-6">
									    <p><i class="fa fa-child"></i> 年龄：${doctorinfo.docage }</p>
									    <hr/>
		                        	</div>
		                        	<div class="col-sm-6">
								        <p><i class="fa fa-intersex"></i> 性别：${doctorinfo.docmale }</p>
								        <hr/>
		                        	</div>
		                        	
		                        </div>
	                        </div>
	                        <div class="clearfix"></div>
	                    </a>
	                    <div align="right">
	                    	<button data-toggle="modal" data-target="#TimeChoosing" type="button" class="btn btn-primary" onclick="OpenModal(${doctorinfo.docloginid });">预约此医生</button>
	                    	<button data-toggle="modal" class="btn btn-primary" href="#modal-form${doctorinfo.docloginid }" onclick="CalendarInit(${doctorinfo.docloginid })">查看日程，预约医生?</button>
	                    </div>
	                </div>
	            </div>
	            <!-- 这个div显示的是从服务端传输过来的每个角色的具体信息 -->
	            <div id="modal-form${doctorinfo.docloginid }" class="modal fade" aria-hidden="true">
	                <div class="modal-dialog" style="width: 1000px">
			            <div class="modal-content">
				            <div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
							</div>
			                <div class="modal-body">
			                    <div class="row">
			                        <div class="col-sm-12 b-r">
			                        	<h3 class="m-t-none m-b">具体信息</h3>
			                        	<div class="row">
			                        		<div class="col-sm-4">
							               		<div class="text-center">
						                        	<img alt="image" class="img-rounded m-t-xs img-responsive" src="${doctorinfo.docloginpix }" style="width: 170px">
						                        	<br/>
						                        	<div align="left">
								                    	<button type="button" data-toggle="modal" data-target="#TimeChoosing" class="btn btn-primary"  onclick="OpenModal(${doctorinfo.docloginid });">预约此医生</button>
								                    </div>
								                    <br/>
						                        </div>
							                    <p><i class="fa fa-user-md"></i> 医生职称：<a>${doctorinfo.doctitlename }</a></p>
							                    <hr/>
						                        <p><i class="fa fa-child"></i> 年龄：<a>${doctorinfo.docage }</a></p>
							               		<hr/>
							                    <p><i class="fa fa-intersex"></i> 性别：<a>${doctorinfo.docmale }</a></p>
							               		<hr/>
							               </div>
			                        		<div class="col-sm-8">
							                    <p><i class="fa fa-user"></i> 真实姓名：<a>${doctorinfo.docname }</a></p>
							                    <hr/>
							                    <p><i class="fa fa-birthday-cake"></i> 出生日期：<a>${doctorinfo.docbirthdate }</a></p>
							                    <hr/>
							                    <p><i class="fa fa-hospital-o"></i> 所属医院：<a>${doctorinfo.dochosp }</a></p>
							                    <hr/>
							                    <p><i class="fa fa-bank"></i> 所属科室：<a>${doctorinfo.docdept }</a></p>
							                    <hr/>
							                    <p><i class="fa fa-map-marker"></i> 医生所在地：<a>${doctorinfo.docloc }</a></p>
							                    <hr/>
							                    <p><i class="fa fa-whatsapp"></i> 联系电话：<a>${doctorinfo.docloginphone }</a></p>
							                    <hr/>
							                    <p><i class="fa fa-heart"></i> 民族：<a>${doctorinfo.docnation }</a></p>
							                    <hr/>
							               </div>
							               <div class="col-sm-12">
							               		<p><i class="fa fa-plus-square"></i> 擅长疾病：<a>${doctorinfo.docexpert }</a></p>
							               		<hr/>
							                    <p><i class="fa fa-info-circle"></i> 医生简介：<a>${doctorinfo.docabs }</a></p>
							               		<hr/>
							               </div>
			                        	</div>
			                        </div>
			                        <div class="col-sm-12 b-r">
			                        <span class="label label-primary"><i class="fa fa-calendar-check-o"></i>具体日程表</span>
			                        <br/><br/>
			                        	<!-- 具体日程表 -->
			                        	<table class="table table-striped table-bordered table-hover" id="DayTable${doctorinfo.docloginid }">
				                        	<thead>
					                        	<tr>
					                        		<th>日程id</th>
					                                <th>日程时间</th>
					                                <th>日程上下午</th>
					                                <th>日程事件</th>
					                                <th>日程详细地点</th>
					                                <th>日程地点备注</th>
					                            </tr>
				                            </thead>
		                            		<tbody>
		                            			
		                            		</tbody>
		                        		</table>
						            </div>
			                    </div>
			                </div>
			            </div>
        			</div>
    			</div>
            </c:forEach>
        </div>
        <!-- 这个modal是点击预约医生出现的，需要填写的会诊价格，会诊时间等信息 -->
        <div class="modal inmodal fade" id="TimeChoosing" tabindex="-1" role="dialog"  aria-hidden="true">
	    	<div class="modal-dialog modal-lg">
	        	<div class="modal-content">
	            	<div class="modal-header">
	                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	                    <h4 class="modal-title">预约医生</h4>
	               	</div>
	                <div class="modal-body">
	                	<input type="hidden" id="docloginid"/>
	                	<div class="row">
							<div class="col-sm-5">
								<div class="form-group">
							    	<label>预约医生时间选择：</label>
							    	<!-- <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
					                    <input class="form-control" size="16" type="text" value="" id="ChooseDocTime" style="width:270px;" readonly>
					                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
										<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
					                </div> -->
					                <select class="form-control" name="ChooseDocTime" id="ChooseDocTime" style="width:350px;">
					                	<option value="0">---选择医生日程---</option>
								    </select>
								</div>
								<div class="form-group">
					                <label>预约医生金额：</label>
					                <input type="text" placeholder="填写金额数，大于零并最多保留两位小数" onkeyup="num(this)" id="orderprice" class="form-control" style="width:350px;"/>
					            </div>
					            <div class="form-group">
					                <label>提供预约医生住宿类型：</label>
					                <select class="form-control" name="accommondationtype" id="accommondationtype" onchange="change('accommondation')" style="width:350px;">
					                	<option value="0">---选择交通类型---</option>
										<option value="1">自理</option>
										<option value="2">医院方付</option>
								    </select>
					            </div>
					            <div class="form-group">
					                <label>提供预约医生住宿金额：</label>
					                <input type="text" onkeyup="num(this)" placeholder="填写金额数，大于零并最多保留两位小数" min="1" id="accommondationprice" class="form-control" style="width:350px;"/>
					            </div>
							</div>
							<div class="col-sm-1">
							</div>
							<div class="col-sm-5">
								<div class="form-group">
					                <label>提供预约医生交通类型：</label>
					                <select class="form-control" name="traffictype" id="traffictype" onchange="change('traffic')" style="width:350px;">
					                	<option value="0">---选择交通类型---</option>
										<option value="1">自理</option>
										<option value="2">医院方付</option>
								    </select>
					            </div>
					            <div class="form-group">
					                <label>提供预约医生交通金额：</label>
					                <input type="text" onkeyup="num(this)" placeholder="填写金额数，大于零并最多保留两位小数" min="1" id="trafficprice" class="form-control" style="width:350px;"/>
					            </div>
					            <div class="form-group">
					                <label>提供预约医生饮食类型：</label>
					                <select class="form-control" name="diettype" id="diettype" onchange="change('diet')" style="width:350px;">
					                	<option value="0">---选择交通类型---</option>
										<option value="1">自理</option>
										<option value="2">医院方付</option>
								    </select>
					            </div>
					            <div class="form-group">
					                <label>提供预约医生饮食金额：</label>
					                <input type="text" onkeyup="num(this)" placeholder="填写金额数，大于零并最多保留两位小数" min="1" id="dietprice" class="form-control" style="width:350px;"/>
					            </div>
							</div>
							<div class="col-sm-12">
								<label>会诊备注：</label>
							    <textarea id="orderabs" rows="5" onkeyup="words_deal();" minlength="20" maxlength="150" name="orderabs" class="form-control" placeholder="填写预约医生的备注，医生会根据备注信息选择是否接受，请认真填写(不超过150字)"></textarea>
							</div>
							<div class="col-sm-12">
								<div class="form-group" align="right">
					            	<h3 style="color: red">总金额是：<a id="totalprice">0</a>&nbsp;&nbsp;元/<i class="fa fa-cny"></i></h3>
					            </div>
							</div>
						</div>
	                </div>
					<div class="modal-footer">
	                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
	                	<button type="button" class="btn btn-primary" onclick="SendRequest()" id="sendpostBtn">提交</button>
	           		</div>
	           	</div>
	        </div>
		</div>
        <div align="left">
        	<h4>当前页是：<span id="index">${page}</span> 页/共<span id="all">${allcount}</span> 页</h4>
        </div> 
        <div align="right">
        	<ul class="pagination pagination-lg" id="pagination">
            	
            </ul>
        </div>
    </div>
    <script src="${pageContext.request.contextPath}/bootstrapStyle/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath}/bootstrapStyle/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="${pageContext.request.contextPath}/bootstrapStyle/js/jquery-confirm.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrapStyle/js/plugins/jeditable/jquery.jeditable.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrapStyle/js/content.min.js?v=1.0.0"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrapStyle/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/bootstrapStyle/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	
	});
	    $(function(){
			var count="${allcount}";
			var page="${page}";
			$('#pagination').append("<li><a href='javascript:void(0);' onclick='pagination(1)'>&laquo;第一页</a></li>");
			for(var i=1;i<=count;i++){
				if(page==i){
					$('#pagination').append("<li><a href='javascript:void(0);' style='color: red'>"+i+"</a></li>");
				}else{
					$('#pagination').append("<li><a href='javascript:void(0);' id='page"+i+"' onclick='pagination("+i+")' >"+i+"</a></li>");
				}
			}
			$('#pagination').append("<li><a href='javascript:void(0);' onclick='pagination("+count+")'>最后一页&raquo;</a></li>");
			
		});
        function pagination(index){
    		var page="${page}";
    		var Backparam = "${Backparam}";
    		if(page==index){
    			$.alert("当前页");
    		}else{
	    		window.location.href="${pageContext.request.contextPath}/Main/doctor/alldoctorshow.action?page="+index+"&"+Backparam;
    		}
    	}
        function OpenModal(docloginid){
        	$('#docloginid').val("");
        	$('#docloginid').val(docloginid);
        	$("#ChooseDocTime").empty();
            $('#ChooseDocTime').append("<option value='' selected='selected' >"+'---选择医生日程---'+"</option>");
        	$.ajax({
        		type:"post",
        		url:"${pageContext.request.contextPath}/Main/doctor/getcalendar.action",
        		async: true,
        		data:"docloginid="+docloginid,
        		success:function(data){
        			if(data.code==100){
        				var datalist=data.list;
        				for(var i=0;i<datalist.length;i++){
        					$('#ChooseDocTime').append("<option value='" + datalist[i].doccalendarid + "' >" + datalist[i].doccalendarday+"/"+datalist[i].doccalendartime + "</option>");  
        				}
        			}else{
        				$.alert(data.msg);
        			}
        		},
        		error:function(request){
        			$.alert("获取日程失败！");
        		}
        	})
        }
        function change(value){
        	var price = Number($('#'+value+'price').val());
        	var totalprice = Number($('#totalprice').text())-price;
        	$('#totalprice').html(totalprice);
        	$('#'+value+'price').val("");
        	var type=$('#'+value+'type').val();
        	//alert(type);
        	if(type==0){
        		$.alert("请选择一个类型！");
        		return false;
        	}else if(type==1){
        		$('#'+value+'price').attr("disabled","disabled");
        	}else{
        		$('#'+value+'price').removeAttr("disabled");
        	}
        }
        $("#orderprice").change(function(){
        	pricechange();
        });
        $("#trafficprice").change(function(){
        	pricechange();
        });
        $("#accommondationprice").change(function(){
        	pricechange();
        });
        $("#dietprice").change(function(){
        	pricechange();
        });
        function pricechange(){
        	var orderprice = $('#orderprice').val();
        	var trafficprice = $('#trafficprice').val();
        	var accommondationprice = $('#accommondationprice').val();
        	var dietprice = $('#dietprice').val();
        	try{
        		var totalprice = Number(orderprice)+Number(trafficprice)+Number(accommondationprice)+Number(dietprice)+0.00;
            	//alert(totalprice);
            	$('#totalprice').html(totalprice);
        	}catch(e){
        		$.alert("输入金额有误！")
        	}
        }
        function SendRequest(){
        	var orderprice = $('#orderprice').val();
        	var ChooseDocTime = $('#ChooseDocTime').val();
        	var docloginid=$('#docloginid').val();
        	var traffictype = $('#traffictype').val();
        	var trafficprice = $('#trafficprice').val();
        	var accommondationtype = $('#accommondationtype').val();
        	var accommondationprice = $('#accommondationprice').val();
        	var diettype = $('#diettype').val();
        	var dietprice = $('#dietprice').val();
        	var orderabs = $('#orderabs').val();
        	if(ChooseDocTime==""){
        		$.alert("请选择预约医生的时间！");
        		return false;
        	}
        	if(orderprice==""){
        		$.alert("请填写预约医生金额");
        		return false;
        	}
        	if(traffictype==0){
        		$.alert("请选择一个交通类型");
        		return false;
        	}else if(traffictype==2 && trafficprice==""){
        		$.alert("请填写交通金额");
        		return false;
        	}
        	if(accommondationtype==0){
        		$.alert("请选择一个住宿类型");
        		return false;
        	}else if(accommondationtype==2 && accommondationprice==""){
        		$.alert("请填写住宿金额");
        		return false;
        	}
        	if(diettype==0){
        		$.alert("请选择一个饮食类型");
        		return false;
        	}else if(diettype==2 && dietprice==""){
        		$.alert("请填写饮食金额");
        		return false;
        	}
        	if(orderabs==""){
        		$.alert("请填写备注信息！");
        		return false;
        	}
        	//alert("docloginid="+docloginid+"--orderprice="+orderprice+"--ChooseDocTime="+ChooseDocTime);
        	var param="docloginid="+docloginid+"&orderprice="+orderprice
        	+"&ChooseDocTime="+ChooseDocTime+"&traffictype="+traffictype+"&trafficprice="+trafficprice+"&accommondationtype="+accommondationtype
        	+"&accommondationprice="+accommondationprice+"&diettype="+diettype+"&dietprice="+dietprice+"&orderabs="+orderabs;
        	//alert(param);
        	$.confirm({
    		    title: '提示!',
    		    content: '是否确认该会诊信息,医生会根据您填写的押金额选择是否接收会诊？',
    		    type: 'blue',
    		    typeAnimated: true,
    		    buttons: {
    		    	确定: function () {
    		    		$("#sendpostBtn").html('<i class="fa fa-spinner fa-spin"></i>处理中...');
    		    		$("#sendpostBtn").prop('disabled',true);
    		    		//向服务器发送医院回证操作！
    		    		$.ajax({
			        		type:"post",
			        		url:"${pageContext.request.contextPath}/Main/doctor/sendRequest.action?",
			        		async: true,
			        		data:param,
			        		success:function(data){
			        			if(data.code=="100"){
			        				$('#TimeChoosing').modal('hide');
			        			}
			        			$.alert(data.msg);
			        			$("#sendpostBtn").html('提交');
		    		    		$("#sendpostBtn").prop('disabled',false);
			        		},
			        		error:function(request){
			        			$.alert('数据请求错误！');
			        			$("#sendpostBtn").html('提交');
		    		    		$("#sendpostBtn").prop('disabled',false);
			        		}
			        	});
    		    	},
    				取消: function () {},
    		    }	
    		});
        }
        /* $('.form_date').datetimepicker({
            language:  'zh-CN',
            format: "yyyy-mm-dd",
            weekStart: 1,
            todayBtn:  1,
    		autoclose: 1,
    		todayHighlight: 1,
    		startView: 2,
    		minView: 2,
    		forceParse: 0
        }); */
        function PublishIllness(){
        	//var Backparam = "${Backparam}";
        	window.location.href="${pageContext.request.contextPath}/Main/doctor/publishillness.action?";
        }
        function addtable(docloginid){
        	$.ajax({
        		type:"post",
        		url:"${pageContext.request.contextPath}/Main/doctor/getcalendar.action",
        		async: true,
        		data:"docloginid="+docloginid,
        		success:function(data){
        			if(data.code==100){
        				var datalist=data.list;
        				for(var i=0;i<datalist.length;i++){
        					$("#DayTable"+docloginid).dataTable().fnAddData([
            					datalist[i].doccalendarid,
            					datalist[i].doccalendarday,
            					datalist[i].doccalendartime,
            					datalist[i].doccalendaraffair,
            					datalist[i].docaddressprovince+datalist[i].docaddresscity+datalist[i].docaddressarea+datalist[i].docaddressother,
            					datalist[i].docaddresslocation
            	        	]);
        				}
        			}else{
        				$.alert(data.msg);
        			}
        		},
        		error:function(request){
        			$.alert("获取日程失败！");
        		}
        	})
        }
        function CalendarInit(docloginid){
			$("#DayTable"+docloginid).dataTable().fnClearTable();
			//$('#DayTable tbody').empty();
        	$("#DayTable"+docloginid).dataTable();//首加载table
        	addtable(docloginid);
        }
        function num(obj){
        	obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
        	obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字
        	obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
        	obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        	obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        }
        function words_deal(){
        	var orderabs=$('#orderabs').val().length;
	        if(orderabs>150){
	        	var num=$("#orderabs").val().substr(0,150);
	        	$("#orderabs").val(num);
	        	//alert("超过字数限制，多出的字将被截断！" );
	        }
        }
	</script>
</body>
</html>